<template>
  <el-card class="card-content" v-if="isShow">
    <el-button-group v-if="isShowChangeButton">
      <el-tooltip class="item" effect="dark" :content="$t('api_test.definition.api_title')" placement="left">
        <el-button
          plain
          style="width: 44px; height: 32px; padding: 5px 8px"
          :class="{ active: showApiList }"
          @click="changeTab('api')"
          >API</el-button
        >
      </el-tooltip>

      <el-tooltip class="item" effect="dark" :content="$t('api_test.definition.case_title')" placement="top">
        <el-button
          plain
          style="width: 44px; height: 32px; padding: 1px"
          :class="{ active: showTestCaseList }"
          @click="changeTab('testCase')"
          >CASE</el-button
        >
      </el-tooltip>

      <el-tooltip class="item" effect="dark" :content="$t('api_test.definition.doc_title')" placement="right">
        <el-button
          plain
          style="width: 44px; height: 32px; padding: 1px"
          :class="{ active: showDocList }"
          @click="changeTab('doc')">
          {{ $t('api_test.definition.doc_title') }}</el-button
        >
      </el-tooltip>
    </el-button-group>

    <template v-slot:header>
      <slot name="header"></slot>
    </template>
    <slot></slot>
  </el-card>
</template>

<script>
export default {
  name: 'ApiListContainerWithDoc',
  data() {
    return {
      isShow: true,
      showApiList: false,
      showTestCaseList: false,
      showDocList: true,
    };
  },
  props: {
    activeDom: String,
    isShowChangeButton: {
      type: Boolean,
      default: true,
    },
  },
  created() {
    this.refreshButtonActiveClass(this.activeDom);
  },
  methods: {
    changeTab(tabType) {
      this.refreshButtonActiveClass(tabType);
      this.$emit('activeDomChange', tabType);
    },
    refreshButtonActiveClass(tabType) {
      if (tabType === 'testCase') {
        this.showApiList = false;
        this.showTestCaseList = true;
        this.showDocList = false;
      } else if (tabType === 'doc') {
        this.showApiList = false;
        this.showTestCaseList = false;
        this.showDocList = true;
      } else {
        this.showApiList = true;
        this.showTestCaseList = false;
        this.showDocList = false;
      }
    },
  },
};
</script>

<style scoped>
.active {
  border: solid 1px #6d317c;
  background-color: var(--color);
  color: #ffffff;
}

.case-button {
  border-left: solid 1px var(--color);
}

.item {
  border: solid 1px var(--color);
}
</style>
